<template>
  <div>
    <div
      style="
        background-color: rgb(239, 239, 244);
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
    >
      <div style="display: flex">
        <div>
          <img
            src="../../assets/img/client.png"
            alt=""
            style="
              width: 40px;
              height: 40px;
              margin-top: 5px;
              margin-left: 10px;
            "
          />
        </div>
        <div style="font-size: 24px; margin-left: 10px; margin-top: 8px">
          我的客户
        </div>
      </div>
      <div style="display: flex">
        <div>
          <el-dropdown
            split-button
            type="primary"
            @click="dialogFormVisible = true"
          >
            新建
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>新建</el-dropdown-item>
              <el-dropdown-item>导入</el-dropdown-item>
              <el-dropdown-item>名片识别</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-dialog title="新建客户" :visible.sync="dialogFormVisible">
          <el-form :model="formData">
            <el-form-item label="客户名称" :label-width="formLabelWidth">
              <el-input
                v-model="formData.clientName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系情况" :label-width="formLabelWidth">
              <el-input
                v-model="formData.contactInformation"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系方式" :label-width="formLabelWidth">
              <el-input v-model="formData.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="客户经理" :label-width="formLabelWidth">
              <el-select
                v-model="formData.clientManager"
                placeholder="请选择客户经理"
              >
                <el-option label="乔锦辉" value="乔锦辉"></el-option>
                <el-option label="王珏" value="王珏"></el-option>
                <el-option label="郭江涛" value="郭江涛"></el-option>
                <el-option label="胡建伟" value="胡建伟"></el-option>
                <el-option label="张光辉" value="张光辉"></el-option>
                <el-option label="高雨" value="高雨"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户阶段" :label-width="formLabelWidth">
              <el-input
                v-model="formData.clientStage"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
              <el-select v-model="formData.state" placeholder="请选择状态">
                <el-option label="成功客户" value="成功客户"></el-option>
                <el-option label="潜在客户" value="潜在客户"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="
                confirm();
                dialogFormVisible = false;
              "
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <div>
          <img
            src="../../assets/img/sq.png"
            alt=""
            style="
              background-color: rgb(200, 200, 200);
              margin-top: 4px;
              margin-left: 20px;
              margin-right: 10px;
            "
          />
        </div>
      </div>
    </div>
    <div style="margin-top: 10px">
      <el-tabs v-model="activeName" @tab-click="tagClick">
        <el-tab-pane label="我的客户" name="first">
          <div style="display: flex">
            <el-dropdown split-button type="primary" size="mini">
              标签
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>集团公司</el-dropdown-item>
                <el-dropdown-item>国企</el-dropdown-item>
                <el-dropdown-item>上市公司</el-dropdown-item>
                <el-dropdown-item>100-200人</el-dropdown-item>
                <el-dropdown-item>200-500人</el-dropdown-item>
                <el-dropdown-item>500-2000人</el-dropdown-item>
                <el-dropdown-item>2000-10000人</el-dropdown-item>
                <el-dropdown-item>采购</el-dropdown-item>
                <el-dropdown-item>合同管理</el-dropdown-item>
                <el-dropdown-item>资产管理</el-dropdown-item>
                <el-dropdown-item>公文管理</el-dropdown-item>
                <el-dropdown-item>制度流程优化</el-dropdown-item>
                <el-dropdown-item>移动办公</el-dropdown-item>
                <el-dropdown-item>内外部协同</el-dropdown-item>
                <el-dropdown-item>人事管理</el-dropdown-item>
                <el-dropdown-item>会议管理</el-dropdown-item>
                <el-dropdown-item>今日新建</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown split-button type="primary" size="mini">
              张帅扬/演示账号
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>张帅扬/演示账号</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown split-button type="primary" size="mini">
              仅本人
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>仅本人</el-dropdown-item>
                <el-dropdown-item>含下属</el-dropdown-item>
                <el-dropdown-item>仅下属</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown split-button type="primary" size="mini">
              联系情况
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>全部</el-dropdown-item>
                <el-dropdown-item>三天未联系</el-dropdown-item>
                <el-dropdown-item>一周未联系</el-dropdown-item>
                <el-dropdown-item>两周未联系</el-dropdown-item>
                <el-dropdown-item>一月未联系</el-dropdown-item>
                <el-dropdown-item>三月未联系</el-dropdown-item>
                <el-dropdown-item>半年未联系</el-dropdown-item>
                <el-dropdown-item>一年未联系</el-dropdown-item>
                <el-dropdown-item>无联系记录</el-dropdown-item>
                <el-dropdown-item>今天联系</el-dropdown-item>
                <el-dropdown-item>近一周联系</el-dropdown-item>
                <el-dropdown-item>近一月联系</el-dropdown-item>
                <el-dropdown-item>近三月联系</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown split-button type="primary" size="mini">
              状态
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>全部</el-dropdown-item>
                <el-dropdown-item>无效客户</el-dropdown-item>
                <el-dropdown-item>基础客户</el-dropdown-item>
                <el-dropdown-item>潜在客户</el-dropdown-item>
                <el-dropdown-item>成功客户</el-dropdown-item>
                <el-dropdown-item>试点客户</el-dropdown-item>
                <el-dropdown-item>典型客户</el-dropdown-item>
                <el-dropdown-item>潜在->冻结</el-dropdown-item>
                <el-dropdown-item>成功->冻结</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown split-button type="primary" size="mini">
              类型
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>全部</el-dropdown-item>
                <el-dropdown-item>客户</el-dropdown-item>
                <el-dropdown-item>供应商</el-dropdown-item>
                <el-dropdown-item>分销商</el-dropdown-item>
                <el-dropdown-item>代理商</el-dropdown-item>
                <el-dropdown-item>合作伙伴</el-dropdown-item>
                <el-dropdown-item>公关媒体</el-dropdown-item>
                <el-dropdown-item>银行</el-dropdown-item>
                <el-dropdown-item>中介机构</el-dropdown-item>
                <el-dropdown-item>外部资源</el-dropdown-item>
                <el-dropdown-item>竞争对手</el-dropdown-item>
                <el-dropdown-item>个人用户</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown split-button type="primary" size="mini">
              描述
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>全部</el-dropdown-item>
                <el-dropdown-item>国有企业</el-dropdown-item>
                <el-dropdown-item>私营企业</el-dropdown-item>
                <el-dropdown-item>外资企业</el-dropdown-item>
                <el-dropdown-item>合资企业</el-dropdown-item>
                <el-dropdown-item>政府机构</el-dropdown-item>
                <el-dropdown-item>事业单位</el-dropdown-item>
                <el-dropdown-item>集体企业</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown split-button type="primary" size="mini">
              规模
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>全部</el-dropdown-item>
                <el-dropdown-item>微型</el-dropdown-item>
                <el-dropdown-item>小型</el-dropdown-item>
                <el-dropdown-item>中型</el-dropdown-item>
                <el-dropdown-item>中大</el-dropdown-item>
                <el-dropdown-item>大型</el-dropdown-item>
                <el-dropdown-item>超大型</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown split-button type="primary" size="mini">
              获得途径
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>RPA抓取</el-dropdown-item>
                <el-dropdown-item>主动来电</el-dropdown-item>
                <el-dropdown-item>竞价广告</el-dropdown-item>
                <el-dropdown-item>外部活动</el-dropdown-item>
                <el-dropdown-item>试用注册</el-dropdown-item>
                <el-dropdown-item>百度搜索</el-dropdown-item>
                <el-dropdown-item>内部关系介绍</el-dropdown-item>
                <el-dropdown-item>外部关系介绍</el-dropdown-item>
                <el-dropdown-item>研究发现</el-dropdown-item>
                <el-dropdown-item>其他</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown split-button type="primary" size="mini">
              全部行业
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>全部行业</el-dropdown-item>
                <el-dropdown-item>电脑及通讯</el-dropdown-item>
                <el-dropdown-item>办公用品</el-dropdown-item>
                <el-dropdown-item>工艺美术品、礼品</el-dropdown-item>
                <el-dropdown-item>金融业</el-dropdown-item>
                <el-dropdown-item>农业</el-dropdown-item>
                <el-dropdown-item>食品</el-dropdown-item>
                <el-dropdown-item>机电</el-dropdown-item>
                <el-dropdown-item>旅游业</el-dropdown-item>
                <el-dropdown-item>建筑行业</el-dropdown-item>
                <el-dropdown-item>服务业</el-dropdown-item>
                <el-dropdown-item>制造业</el-dropdown-item>
                <el-dropdown-item>政府和公共事业</el-dropdown-item>
                <el-dropdown-item>其他</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div
            style="display: flex; margin-top: 10px; flex-direction: row-reverse"
          >
            <div>
              <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="input"
                size="mini"
              >
              </el-input>
            </div>
            <div>
              <el-button size="mini">高级搜索</el-button>
            </div>
          </div>
          <div style="margin-top: 10px">
            <el-table :data="customerData" style="width: 100%">
              <el-table-column prop="attention" label="关注"
                ><el-rate
                  v-model="value"
                  :colors="colors"
                  @change="rateChange"
                ></el-rate>
              </el-table-column>
              <el-table-column prop="clientName" label="客户名称" width="230">
              </el-table-column>
              <el-table-column prop="contactInformation" label="联系情况">
              </el-table-column>
              <el-table-column prop="phone" label="电话"> </el-table-column>
              <el-table-column prop="clientManager" label="客户经理">
              </el-table-column>
              <el-table-column prop="clientStage" label="客户阶段">
              </el-table-column>
              <el-table-column prop="state" label="状态"> </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="open(scope.row)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { queryClient,addClient,deleteClient } from "../../api/sales";
export default {
  mounted() {
    this.queryClient();
    this.addClient();
  },
  data() {
    return {
      dialogFormVisible: false,
      value: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      activeName: "first",
      customerData: [],
      formData: {
        clientName: "",
        contactInformation: "",
        phone: "",
        clientManager: "",
        clientStage: "",
        state: "",
      },
      formLabelWidth: '120px'
    };
  },
  methods: {
    rateChange(value) {
      console.log(value);
    },
    queryClient() {
      queryClient().then((res) => {
        console.log(res);
        this.customerData = res.result;
      });
    },
    open(row) {
      console.log(row);
      let clientdel = {
          clientId: row.clientId
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.delClient(clientdel);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });    
    },
    delClient(clientdel) {
      deleteClient(clientdel).then((res) => {
        this.queryClient();
        console.log(res);
      });
    },
    confirm() {
      const newClientData = {
        clientName: this.formData.clientName,
        contactInformation: this.formData.contactInformation,
        phone: this.formData.phone,
        clientManager: this.formData.clientManager,
        clientStage: this.formData.clientStage,
        state: this.formData.state,
      }
      console.log(newClientData);
      addClient(newClientData).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style>
.el-dropdown {
  vertical-align: top;
}
.el-dropdown {
  margin-left: 15px;
}
</style>